<template>
  <div class="ele-body">
    <a-row :gutter="12">
      <a-col :span="24">
        <div class="ten-height bg-white padding10 box-shadow">
          <div class="table-header">
            <div class="header-left">
              <a-space size="large">
                <a-input
                  v-model:value="where.searchText"
                  placeholder="输入名称或编码（回车搜索）"
                  @pressEnter="reload"
                  class="search-input"
                >
                  <template #suffix>
                    <search-outlined @click="reload" />
                  </template>
                </a-input>
                <a-button type="primary" style="background-color: red; border-color: red" class="border-radius" @click="clear"
                  >清空条件</a-button
                >
              </a-space>
            </div>
            <div class="header-right">
              <a-space>
                <a-button type="primary" class="border-radius" @click="openAddEdit()"><plus-outlined />新建</a-button>
                <a-dropdown>
                  <template #overlay>
                    <a-menu @click="moreClick">
                      <a-menu-item key="1">
                        <ordered-list-outlined />
                        自定义列
                      </a-menu-item>
                      <div>
                        <a-menu-item key="2">
                          <delete-outlined style="color: red" />
                          删除
                        </a-menu-item>
                      </div>
                    </a-menu>
                  </template>
                  <a-button>
                    更多
                    <small-dash-outlined />
                  </a-button>
                </a-dropdown>
              </a-space>
            </div>
          </div>
          <div class="table-content">
            <common-table
              :columns="columns"
              :where="where"
              bordered
              rowId="lmiId"
              ref="tableRef"
              url="/labMainInfo/page"
              :scroll="{ x: 'max-content', y: 'calc(100vh - 240px)' }"
            >
              <template #bodyCell="{ column, record }">
                <!-- 操作 -->
                <template v-if="column.key == 'action'">
                  <a-space>
                    <icon-font
                      type="class"
                      iconClass="icon-button-edit"
                      color="var(--primary-color)"
                      font-size="20px"
                      fontWeight="bold"
                      title="编辑"
                      @click="openAddEdit(record)"
                    ></icon-font>
                    <icon-font
                      type="class"
                      iconClass="icon-button-delete"
                      color="red"
                      font-size="20px"
                      fontWeight="bold"
                      title="删除"
                      @click="remove(record)"
                    ></icon-font>
                  </a-space>
                </template>
              </template>
            </common-table>
          </div>
        </div>
      </a-col>
    </a-row>

    <!-- 自定义列 -->
    <Custom
      v-model:visible="isShowCustom"
      v-if="isShowCustom"
      :data="columns"
      @done="val => (columns = val)"
      :fieldBusinessCode="fieldBusinessCode"
    />

    <!-- 新增编辑弹框 -->
    <LabMainInfoAddEdit v-model:visible="showEdit" v-if="showEdit" :data="current" @done="reload" />
  </div>
</template>

<script setup name="LabMainInfo">
import { LabMainInfoApi } from './api/LabMainInfoApi';
import { ref, createVNode, onMounted } from 'vue';
import { message, Modal } from 'ant-design-vue/es';
import LabMainInfoAddEdit from './components/lab-main-info-add-edit.vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { CustomApi } from '@/components/common/Custom/api/CustomApi';

// 表格配置
const columns = ref([
  {
    key: 'index',
    title: '序号',
    width: 48,
    align: 'center',
    isShow: true,
    hideInSetting: true,
    customRender: ({ index }) => tableRef.value.tableIndex + index
  },
  {
    dataIndex: 'lmiId',
    title: '主键id',
    align: 'center',
    ellipsis: true,
    width: 200,
    isShow: true
  },
  {
    dataIndex: 'sampleId',
    title: '样品号',
    align: 'center',
    ellipsis: true,
    width: 200,
    isShow: true
  },
  {
    dataIndex: 'nak2o',
    title: '碱金属(Na2O+K2O)',
    align: 'center',
    ellipsis: true,
    width: 200,
    isShow: true
  },
  {
    dataIndex: 'qgrd',
    title: '高位发热量(Qgr,d)',
    align: 'center',
    ellipsis: true,
    width: 200,
    isShow: true
  },
  {
    dataIndex: 'hgi',
    title: '哈式可磨指数',
    align: 'center',
    ellipsis: true,
    width: 200,
    isShow: true
  },
  {
    dataIndex: 'caking',
    title: '黏结指数',
    align: 'center',
    ellipsis: true,
    width: 200,
    isShow: true
  },
  {
    dataIndex: 'ci',
    title: '干燥基氯',
    align: 'center',
    ellipsis: true,
    width: 200,
    isShow: true
  },
  {
    dataIndex: 'coke',
    title: '焦渣特征(类型)',
    align: 'center',
    ellipsis: true,
    width: 200,
    isShow: true
  },
  {
    dataIndex: 'mt',
    title: '全水(Mt)',
    align: 'center',
    ellipsis: true,
    width: 200,
    isShow: true
  },
  {
    dataIndex: 'std',
    title: '干基硫分(St,d)',
    align: 'center',
    ellipsis: true,
    width: 200,
    isShow: true
  },
  {
    dataIndex: 'qnetar',
    title: '低位发热量（Qnet,ar)',
    align: 'center',
    ellipsis: true,
    width: 200,
    isShow: true
  },
  {
    dataIndex: 'mad',
    title: '水分(Mad)',
    align: 'center',
    ellipsis: true,
    width: 200,
    isShow: true
  },
  {
    dataIndex: 'vd',
    title: '挥发分(Vd)',
    align: 'center',
    ellipsis: true,
    width: 200,
    isShow: true
  },
  {
    dataIndex: 'ad',
    title: '灰分含量(Ad)',
    align: 'center',
    ellipsis: true,
    width: 200,
    isShow: true
  },
  {
    dataIndex: 'fcad',
    title: '固定碳(空气干燥基)',
    align: 'center',
    ellipsis: true,
    width: 200,
    isShow: true
  },
  {
    dataIndex: 'had',
    title: '氢(空气干燥基)',
    align: 'center',
    ellipsis: true,
    width: 200,
    isShow: true
  },
  {
    dataIndex: 'delFlag',
    title: '删除标记：Y-已删除，N-未删除',
    align: 'center',
    ellipsis: true,
    width: 200,
    isShow: true
  },
  {
    dataIndex: 'createTime',
    title: '创建时间',
    align: 'center',
    ellipsis: true,
    width: 200,
    isShow: true
  },
  {
    dataIndex: 'createUser',
    title: '创建人',
    align: 'center',
    ellipsis: true,
    width: 200,
    isShow: true
  },
  {
    dataIndex: 'updateTime',
    title: '更新时间',
    align: 'center',
    ellipsis: true,
    width: 200,
    isShow: true
  },
  {
    dataIndex: 'updateUser',
    title: '更新人',
    align: 'center',
    ellipsis: true,
    width: 200,
    isShow: true
  },
  {
    key: 'action',
    title: '操作',
    align: 'center',
    width: 100,
    fixed: 'right',
    isShow: true
  }
]);
// ref
const tableRef = ref(null);

// 搜索条件
const where = ref({
  searchText: ''
});

// 是否显示自定义列
const isShowCustom = ref(false);

// 当前行数据
const current = ref(null);

// 是否显示新增编辑弹框
const showEdit = ref(false);

// 业务标识的编码
const fieldBusinessCode = ref('LAB_MAIN_INFO');

onMounted(() => {
  getColumnData();
});

// 获取表格配置
const getColumnData = () => {
  CustomApi.getUserConfig({ fieldBusinessCode: fieldBusinessCode.value }).then(res => {
    if (res.tableWidthJson) {
      columns.value = JSON.parse(res.tableWidthJson);
    }
  });
};

// 更多点击
const moreClick = ({ key }) => {
  if (key == '1') {
    isShowCustom.value = true;
  } else if (key == '2') {
    batchDelete();
  }
};

// 点击搜索
const reload = () => {
  tableRef.value.reload();
};

// 清除搜索条件
const clear = () => {
  where.value.searchText = '';
  reload();
};

// 新增编辑点击
const openAddEdit = record => {
  current.value = record;
  showEdit.value = true;
};

// 删除单个
const remove = record => {
  Modal.confirm({
    title: '提示',
    content: '确定要删除选中的MES煤的质检数据吗?',
    icon: createVNode(ExclamationCircleOutlined),
    maskClosable: true,
    onOk: async () => {
      const res = await LabMainInfoApi.delete({ lmiId: record.lmiId });
      message.success(res.message);
      reload();
    }
  });
};

// 批量删除
const batchDelete = () => {
  if (tableRef.value.selectedRowList && tableRef.value.selectedRowList.length == 0) {
    return message.warning('请选择需要删除的MES煤的质检数据');
  }
  Modal.confirm({
    title: '提示',
    content: '确定要删除选中的MES煤的质检数据吗?',
    icon: createVNode(ExclamationCircleOutlined),
    maskClosable: true,
    onOk: async () => {
      const res = await LabMainInfoApi.batchDelete({ batchDeleteIdList: tableRef.value.selectedRowList });
      message.success(res.message);
      reload();
    }
  });
};
</script>

<style scoped lang="less">
.table-header {
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.table-content {
  width: 100%;
  height: calc(100% - 50px);
}
:deep(.ant-table-body) {
  min-height: calc(100vh - 240px) !important;
}
.search-input {
  width: 300px;
  border-radius: 5px;
}
</style>
